<!-- eslint-disable vue/no-unused-vars -->
<template>
  <div class="List">
    <div class="top">
      <el-input v-model="inputValue" placeholder="输入样品名字查询" />
      <el-button type="primary">查询</el-button>
      <el-button type="primary">新增</el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        prop="name"
        label="样品名字"
        width="260"
        align="center"
      />
      <el-table-column prop="brand" label="品牌" width="300" align="center" />
      <el-table-column prop="type" label="类型" width="200" align="center" />
      <el-table-column prop="unit" label="单位" width="200" align="center" />
      <el-table-column prop="address" label="产地" width="260" align="center" />
      <el-table-column prop="operation" label="操作" align="center">
        <template #default="scope">
          <a href="./edit"><button class="button">编辑</button></a>
          <button class="button">详情</button>
          <button class="button">删除</button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-pagination background layout="prev, pager, next" :total="50" />
</template>

<script>
export default {
  name: "List",
  data() {
    return {
      inputValue: "",
      tableData: [
        {
          name: "heeled",
          brand: "拼多多",
          type: "CY",
          unit: "CYZ",
          address: "成都武侯区",
        },
        {
          name: "heeled",
          brand: "拼多多",
          type: "CY",
          unit: "CYZ",
          address: "成都武侯区",
        },
        {
          name: "heeled",
          brand: "拼多多",
          type: "CY",
          unit: "CYZ",
          address: "成都武侯区",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.top {
  float: right;
  margin-right: 20px;
  margin-bottom: 10px;
  .el-input {
    width: 200px;
    margin-right: 10px;
  }
}
.button {
  border: none;
  background-color: #fff;
  margin-left: 10px;
  color: rgb(26, 99, 255);
}
.el-pagination {
  margin-top: 100px;
  margin-left: 500px;
}
</style>
